@extends('admin.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

            @include('admin.layouts.navbar')
            @include('admin.layouts.sidebar')

            <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('admin.games.index') }}">发布记录</a></li>
                                <li class="breadcrumb-item active" aria-current="page">发布</li>
                            </ol>
                        </nav>

                        <div class="card">
                            <div class="card-body">

                                <div class="row">
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>服务器名称：</label>
                                            <input type="text" class="form-control" id="server_name" maxlength="8">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>服务器IP：</label>
                                            <input type="text" class="form-control" id="server_ip" maxlength="8">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>登录器下载：</label>
                                            <input type="text" class="form-control" id="login_down">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>详细版本介绍：</label>
                                            <input type="text" class="form-control" id="introduction" maxlength="20">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-row">
                                            <div class="col-lg-8">
                                                <div class="form-group">
                                                    <label>推荐星级：</label>
                                                    <input type="text" class="form-control" id="stars">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group" >
                                                    <label>发布数量：</label>
                                                    <input type="text" class="form-control" id="count" value="1" maxlength="15">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>福利：</label>
                                            <input type="text" class="form-control" id="money" value="">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>游戏主页：
                                                <small class="text-danger">（ 注意：主页必须以http:// 或 https:// 开头 ）</small>
                                            </label>
                                            <input type="url" class="form-control" id="url" value="http://" maxlength="50">
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <label>开机时间：</label>
                                        <div class="form-row">
                                            <div class="col">
                                                <div class="form-group">
                                                    <select class="form-control" id="is_every_day">
                                                        <option value="2">非每天</option>
                                                        <option value="1">每天</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <input type="date" class="form-control" id="date" value="{{ date('Y-m-d') }}" placeholder="年/月/日">
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <select class="form-control" id="hour">
                                                        <option value=""> 请选择时</option>
                                                        <option value="00">00</option>
                                                        <option value="07">07</option>
                                                        <option value="08">08</option>
                                                        <option value="09">09</option>
                                                        <option value="10">10</option>
                                                        <option value="11">11</option>
                                                        <option value="12">12</option>
                                                        <option value="13">13</option>
                                                        <option value="14">14</option>
                                                        <option value="15">15</option>
                                                        <option value="16">16</option>
                                                        <option value="17">17</option>
                                                        <option value="18">18</option>
                                                        <option value="19">19</option>
                                                        <option value="20">20</option>
                                                        <option value="21">21</option>
                                                        <option value="22">22</option>
                                                        <option value="23">23</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <select class="form-control" id="minute">
                                                        <option value=""> 请选择分钟</option>
                                                        <option value="00">00</option>
                                                        <option value="05">05</option>
                                                        <option value="30">30</option>
                                                        <option value="59">全天</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="form-group">
                                                    <select class="form-control" id="is_all_day">
                                                        <option value="2">非全天</option>
                                                        <option value="1">全天</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>位置选择：</label>
                                            <select class="form-control" name="is_top" id="is_top">
                                                <option value="0">开服列表</option>
                                                <option value="-1">福利列表</option>
                                                {{--                                                <option value="5">一号位</option>--}}
                                                {{--                                                <option value="4">二号位</option>--}}
                                                {{--                                                <option value="3">三号位</option>--}}
                                                {{--                                                <option value="2">四号位</option>--}}
                                                {{--                                                <option value="1">五号位</option>--}}
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>封面图片：</label>
                                            <input type="file" class="form-control" id="image" onchange="upload_image()">
                                            <input type="hidden" id="image-value" value="">
                                            <a href="javascript:void(0);" id="show-image" style="display: none;" target="_blank">查看图片</a>
                                        </div>
                                    </div>

                                    <div class="col-lg-5" style="display:none;">
                                        <div class="form-group">
                                            <label>是否通区：
                                            </label>
                                            <select class="form-control" id="is_tq">
                                                <option value="2">否</option>
                                                <option value="1">是</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>是否热门：
                                            </label>
                                            <select class="form-control" id="is_rm">
                                                <option value="-1">否</option>
                                                <option value="1">是</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>服务器名称：</label>
                                            <input type="text" class="form-control" id="server_name" maxlength="8">
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>通区编号：(通区RMB,通区元宝,通区RMB补发,红包币【英文逗号隔开】)
                                            </label>
                                            <input type="text" class="form-control" id="area_code" >
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>兑换平台：
                                            </label>
                                            <select class="form-control" id="dh_plat_id">
                                                <option value="0">请选择平台</option>
                                                @foreach($dhPlat as $item)
                                                    <option value="{{$item->id}}">{{$item->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5" style="display:none;">
                                        <div class="form-group">
                                            <label>是否手游：
                                            </label>
                                            <select class="form-control" id="is_mobile">
                                                <option value="0">请选择</option>
                                                <option value="1">是</option>
                                                <option value="2">否</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>攻沙专区：
                                            </label>
                                            <select class="form-control" id="is_gs">
                                                <option value="0">请选择</option>
                                                <option value="1">是</option>
                                                <option value="2">否</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5" style="display:none;">
                                        <div class="form-group">
                                            <label>是否抽奖：
                                            </label>
                                            <select class="form-control" id="is_draw">
                                                <option value="0">请选择</option>
                                                <option value="1">是</option>
                                                <option value="2">否</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5" style="display:none;">
                                        <div class="form-group">
                                            <label>是否兑换乐游币：
                                            </label>
                                            <select class="form-control" id="is_lyb">
                                                <option value="0">请选择</option>
                                                <option value="1">是</option>
                                                <option value="2">否</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>版本比例：</label>
                                            <select class="form-control" id="is_bilitype">
                                                <option value="0">请选择</option>
                                                <option value="1">百倍比例</option>
                                                <option value="2">千倍比例</option>
                                                <option value="3">精品推荐</option>
                                                <option value="4">红包版本</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>版本状态：</label>
                                            <select class="form-control" id="is_tops">
                                                <option value="0">即将下线</option>
                                                <option value="1">火爆</option>
                                                <option value="2">今日新上</option>
                                                <option value="3">即将上线</option>
                                                <option value="4">人气一般</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <label>技术人员选项：</label>
                                            <select class="form-control" id="technician">
                                                <option value="1号技术">1号技术</option>
                                                <option value="2号技术">2号技术</option>
                                                <option value="3号技术">3号技术</option>
                                                <option value="4号技术">4号技术</option>
                                                <option value="5号技术">5号技术</option>
                                            </select>
                                        </div>
                                    </div>

                                    </div>


                                    <div class="col-lg-10 layui-form">
                                        <div class="form-group">
                                            <label>自定义链接：(格式：【站点[此处为英文逗号]链接】，一行一个，如：l3y.info,http://www.baidu.com)
                                            </label>
                                            <textarea id="extend_url" rows="5" style="width: 100%; border: 1px solid #ccc; border-radius: 4px; padding: 4px;"></textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-10 layui-form">
                                        <div class="form-group">
                                            <label>关联标签：
                                            </label>
                                            @foreach($tags as $item)
                                                <input type="checkbox" class="game-tag-item" name="game-tag" data-id="{{$item->id}}" title="{{$item->tag_name}}" >
                                            @endforeach
                                        </div>
                                    </div>



                                    {{--                                    服务器列表--}}
                                    <div class="col-lg-10">
                                        <div class="form-group">
                                            <button class="btn btn-success" onclick="add_server()">添加服务器</button>
                                        </div>
                                        <div class="form-group" id="server-list">

                                        </div>
                                    </div>

                                    <div class="col-lg-5">
                                        <div class="form-group">
                                            <button class="btn btn-primary" onclick="operation_tip()">提交</button>
                                        </div>
                                    </div>

                                </div> <!-- .row -->
                            </div> <!-- .card-body -->
                        </div> <!-- .card -->

                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script>

        function getTags() {
            let ids = []
            $.each($('.game-tag-item:checkbox:checked'),function(){
                ids.push(+$(this).attr('data-id'))
            });
            return ids
        }

        let isLoading = false;

        //提交
        function submit() {

            // 获取服务器信息
            let serverList = new Array();
            $(".server-name-item").each(function (k, v) {
                let item = {
                    name: $(this).val(),
                    date: `${$(".server-hours-item").eq(k).val()}:${$(".server-min-item").eq(k).val()}`
                }
                serverList.push(item)
            })

            if (!$('#server_name').val()) {
                toast('服务器名称 不能为空');
                return false
            }
            if (!$('#server_ip').val()) {
                toast('服务器IP 不能为空。');
                return false
            }
            if (!$('#introduction').val()) {
                toast('版本介绍 不能为空。');
                return false
            }
            if( !$('#count').val()){
                toast('福利数量 不能为空。');
                return false
            }
            if (!$('#url').val()) {
                toast('游戏主页 不能为空。');
                return false
            }
            if ($('#money').val() < 0) {
                toast('请输入领取金额。');
                return false
            }

            let data = new Date();
            let year = data.getFullYear();              // 从 Date 对象以四位数字返回年份。
            let month = data.getMonth() + 1;            // 从 Date 对象返回月份 (0 ~ 11)。
            let strDate = data.getDate();               // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            let systemData = year + "-" + month + "-" + strDate;

            // 每天
            if ($('#is_every_day option:selected').val() == 2) {
                if (!$('#date').val()) {
                    toast('请选择 开机日期。');
                    return false
                }
                if ($('#date').val() < systemData) {
                    toast('开机日期 不能小于当前日期。');
                    return false
                }

                if (!$('#hour option:selected').val()) {
                    toast('开机时钟 不能为空。');
                    return false
                }

                if (!$('#minute option:selected').val()) {
                    toast('开机分钟 不能为空。');
                    return false
                }
            }

            $('#kf_url').val($('#url').val())

            if (isLoading === false) {
                isLoading = true;

                axios.post('{{ route('admin.games.store') }}', {
                    server_name: $('#server_name').val(),
                    server_ip: $('#server_ip').val(),
                    open_time: $('#date').val() + ' ' + $('#hour').val() + ':' + $('#minute').val(),
                    stars: $('#stars').val(),
                    introduction: $('#introduction').val(),
                    login_down: $('#login_down').val(),
                    kf_url: $('#kf_url').val(),
                    count: $('#count').val(),
                    url: $('#url').val(),
                    server_list: serverList,
                    is_top: $('#is_top').val(),
                    image: $('#image-value').val(),
                    money: $('#money').val(),
                    is_all_day: $('#is_all_day option:selected').val(),
                    is_every_day: $('#is_every_day option:selected').val(),
                    is_tq: $('#is_tq').val(1),
                    is_rm: $('#is_tq').val(1),
                    is_gs: $('#is_gs option:selected').val(),
                    is_draw: $('#is_draw').val(2),
                    area_code: $('#area_code').val(),
                    dh_plat_id: $('#dh_plat_id option:selected').val(),
                    tags: getTags(),
                    is_mobile: $('#is_mobile').val(2),
                    extend_url: $('#extend_url').val(),
                    is_lyb: $('#is_lyb').val(1),
                    is_tops: $('#is_tops option:selected').val(),
                    is_bilitype: $('#is_bilitype option:selected').val(),
                    technician: $('#technician option:selected').val(),
                })
                    .then(function (response) {
                        isLoading = false;
                        toast(response.data.message);
                        if (response.data.success === 'true') {
                            setTimeout(() => {
                                window.location.href="javascript:history.go(-1)";
                            }, 2000)
                        }

                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            return false;
                        });
                    })
            }
        }

        let serverDom = `
        <div class="form-row">
            <div class="col">
                <input type="text" class="form-control server-name-item" maxlength="50">
            </div>

            <div class="col">
                <div class="form-group">
                    <select class="form-control server-hours-item" id="hour">
                        <option value=""> 请选择时</option>
                        <option value="00">00</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                    </select>
                </div>
            </div>
            <div class="col">
                <div class="form-group">
                    <select class="form-control server-min-item" id="minute">
                        <option value=""> 请选择分钟</option>
                        <option value="00">00</option>
                        <option value="05">05</option>
                        <option value="30">30</option>
                    </select>
                </div>
            </div>


            <div class="col">
                <button class="btn btn-danger" onclick="delete_server(this)">删除</button>
            </div>
        </div>
        `

        function add_server() {
            $('#server-list').append(serverDom)
        }

        function delete_server(dom) {
            $(dom).parent().parent().remove()
        }

        function upload_image() {
            var formData = new FormData();
            formData.append('file', $('#image')[0].files[0]);  //添加图片信息的参数
            $.ajax({
                url: "{{route('admin.games.uploadImg', '')}}",
                type: "post",
                dataType: "json",
                cache: false,
                data: formData,
                processData: false,// 不处理数据
                contentType: false, // 不设置内容类型
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    if (data.status === 0) {
                        $('#show-image').attr('href', '/uploads/' + data.path)
                        $('#image-value').val(data.path)
                        $('#show-image').css('display', 'inline-block')
                        toast("添加成功");
                    }
                }
            })
        }
    </script>

    </body>

@endsection
